<script lang='ts' setup>
import { Site } from '@/config/base';
import { handleAssetsUrl } from '@/utils/fileConvert';

/** 
 * slot 
 * content  选择模型及提示词使用此插槽
 */
defineProps<{ abbreviations: boolean }>();

const list = [
  {
    icon: "@/assets/images/guide/book.svg",
    name: '怎样用「在问」？',
    desc: "玩法秘籍，玩转在问功能",
    href: "https://zaiwen-chattests.feishu.cn/docx/AvFGd6KX8o8U7QxjY63c0jBGnlT"
  },
  {
    icon: "@/assets/images/guide/mode.svg",
    name: '哪个模型适合我？',
    desc: "各大模型简介，选择模型不再犹豫",
    href: "https://zaiwen-chattests.feishu.cn/wiki/Q9l2wHd5lipvO1kkYcscKEHhnig"
  },
  {
    icon: "@/assets/images/guide/draw.svg",
    name: '如何开始AI绘画？',
    desc: "AI绘画攻略，享受AI绘画的乐趣",
    href: "https://zaiwen-chattests.feishu.cn/wiki/SpiowbYyAiwGYGk4TAmcE2sanBd"
  },
]



function onItem(item): void {
  window.open(item.href)
}

</script>
<template>
  <div class="abbreviations flex" v-if="abbreviations">
    <slot name="content"></slot>
  </div>
  <div class="guide flex-c" v-else>
    <div class="header flex-c">
      <div class="title"> {{ Site.name }} </div>
      <div class="slogan"> {{ Site.slogan }} </div>
    </div>
    <div class="content flex">
      <slot name="content"></slot>
    </div>
    <div class="group">
      <div class="cell flex" v-for="(item, index) in list" :key="index" @click="onItem(item)">
        <div class="left flex">
          <div class="icon">
            <img :src="handleAssetsUrl(item.icon)" width="70px">
          </div>
          <div class="value">
            <div class="name">{{ item.name }}</div>
            <div class="desc">{{ item.desc }}</div>
          </div>
        </div>
        <div class="right">
          <icon-right size="20" />
        </div>
      </div>
    </div>
  </div>
</template>
<style lang='scss' scoped>
.abbreviations {
  margin-bottom: 10px;
  justify-content: center;
  position: sticky;
  top: -10px;
  background: var(--color-bg-2);
  z-index: 9;
  padding: 10px;
}

.guide {
  padding: 4rem 0;
  justify-content: center;

  .header {
    .title {
      font-weight: 700;
      font-size: 2.5rem;
      line-height: 4rem;
    }

    .slogan {
      color: var(--color-neutral-6);
      margin-top: 0.5rem;
      font-size: 1.5rem;
      line-height: 2.25rem;
      letter-spacing: -.03em;
    }
  }

  .content {
    margin-top: 20px;

    .btn {
      margin: 0 0.875rem;
    }
  }

  .group {
    width: 100%;
    max-width: 32.75rem;

    .cell {
      width: 100%;
      padding: 0.875rem;
      border: 1px solid var(--color-neutral-2);
      border-radius: 8px;
      margin-top: 20px;
      cursor: pointer;

      &:hover {
        border-color: var(--color-neutral-4);
      }

      .left {
        flex: 1;

        .icon {
          margin-right: 1.5rem;

          img {
            width: 70px;
            height: 70px;
          }
        }

        .value {
          .name {
            font-size: 1.125rem;
            line-height: 2rem;
            font-weight: 600;
            letter-spacing: -.03em;
          }
        }
      }
    }
  }
}
</style>